<template>
  <div>
    <naviga-tion class="naviga-tion">
      <div slot="one">
        <img src="~assets/img/profile/navigation/personage.svg" alt="" />
        <p>主页</p>
      </div>
      <div slot="two">
        <img src="~assets/img/profile/navigation/member.svg" alt="" />
        <p>会员</p>
      </div>
      <div slot="three">
        <img src="~assets/img/profile/navigation/collect.svg" alt="" />
        <p>收藏</p>
      </div>
      <div slot="four">
        <img src="~assets/img/profile/navigation/attention.svg" alt="" />
        <p>关注</p>
      </div>

      <div slot="five">
        <img src="~assets/img/profile/navigation/footprint.svg" alt="" />
        <p>足迹</p>
      </div>
    </naviga-tion>
  </div>
</template>

<script>
import NavigaTion from "./NavigaTion.vue";
export default {
  name: "NavigaTionItem",
  components: {
    NavigaTion,
  },
};
</script>

<style scoped>
.naviga-tion {
  text-align: center;
  background: url("../../../assets/img/regisetr/login2.jpg");
  background-size: cover;
  border: 3px solid seashell;
  margin-bottom: 10px;
  margin-top: 10px;
  border-radius: 10px;
}

.naviga-tion div {
  width: 50%;
  margin: 20%;
}

.naviga-tion div img {
  width: 100%;
}
</style>
